<template>
    <div class="userinfo-page">
        <button type="button" class="back" @click="$router.back()"><i class="iconfont icon-zuo"></i>返回</button>
        <div class="menu-opt" v-show="menushow" @click="menushow = false"></div>
        <div class="menu" v-if="info.relation == 2">
            <button type="button" class="iconfont icon-caidan" @click="menushow = !menushow"></button>
            <div class="menu-down" v-show="menushow">
                <span @click="deleteFriend">删除</span>
            </div>
        </div>
        <div class="userinfo-top-bg"></div>
        <div class="user-avatar"><i class="iconfont icon-morentouxiang"></i></div>
        <div class="user-name">{{info.name}}</div>
        <div class="user-btn">
            <button type="button" class="trans" @click="$router.push(`/transfer?phone=${info.phone}`)">转帐</button>
            <button type="button" class="add" :class="[{applyed:info.relation == 1}]" @click="sendType(info.relation)">{{info.relation == 2?'发送消息':info.relation == 1?'已发送好友申请':'加好友'}}</button>
        </div>
        <div class="user-item  user-phone"><span>手机号：</span><p>{{info.phone}}</p></div>
        <div class="user-item codetype">
            <span class="label">证件类型:</span>
            <p class="control-input">{{typeMap}}</p>
        </div>
        <div class="user-item codenum">
            <span class="label">证件号码:</span>
            <p>{{info.cardNum || '******'}}</p>
        </div>
        <div class="user-item codeimg">
            <span class="label">证件照片:</span>
            <div class="user-imglist">
                <div class="user-add">
                    <span class="imgbg">
                        <img v-if="info.image_a" :src="info.image_a" alt="">
                        <i v-else>还没上传证件</i>
                    </span>
                </div>
                <div class="user-add">
                    <span class="imgbg">
                        <img v-if="info.image_b" :src="info.image_b" alt="">
                        <i v-else>还没上传证件</i>
                    </span>
                </div>
            </div>
        </div>

        <!--添加好友  描述-->
        <add-dialog v-if="dialogshow" :item="info" @hidedialog="hidedialog" @sendtext="onsendtext"></add-dialog>
    </div>
</template>

<script>
import addDialog from '@/components/friends/dialog.vue'
export default {
    data(){
        return{
            info:'',
            typeMap:'',
            dialogshow:false,
            menushow:false
        }
    },
    created(){
        this.getIdentify();
    },
    components:{
        addDialog
    },
    methods:{
        /**
         * 删除好友
         */
        deleteFriend(){
            this.$http.get(`/Message/deleteFriend`,{
                id:this.$route.query.id
            }).then(res => {
                console.log(res)
                if(res.code == 200){
                    this.$createToast({
                        time: 2000,
                        txt: '操作成功',
                        type:'correct'
                    }).show()
                    setTimeout( () => {
                        this.$router.back()
                    },2000)
                }else{
                    this.$createToast({
                        time: 2000,
                        txt: res.msg,
                        type:'error'
                    }).show()
                }
            })
        },
        hidedialog(){
            this.dialogshow = false
        },
        onsendtext(){
            this.info.relation = 1
        },
        /**
         * 发送好友请求 0  发送消息2
         */
        sendType(type){
            switch(type){
                case 0:
                    this.dialogshow = true
                break;
                case 2:
                    this.$router.push(`/chat?uid=${this.$route.query.uid}&name=${this.info.name}&union_id=${this.$route.query.union_id}`)
                break;
            }
        },
        getIdentify(){
            this.$http.get(`/MyInfo/getIdentify`,{
                tmpid:this.$route.query.uid
            }).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.info = res.data.info
                    this.typeMap = res.data.typeMap.id_card
                }
            })
        }
    }
}
</script>


<style lang="stylus">
.userinfo-page{
    position relative
    .back{
        position absolute
        top 10px
        left 10px
        z-index 1
        color #ffffff
        display flex
        align-items center
        font-size 14px
        i{
            font-size 20px
        }
    }
    .menu-opt{
        position absolute
        top 0
        left 0
        right 0
        bottom 0
    }
    .menu{
        position absolute
        top 0px
        right 10px
        button{
            color #ffffff
            font-size 24px
            width 40px
            height 40px
        }
        .menu-down{
            width 50px
            padding 5px 0
            background rgba(0,0,0,0.5)
            position absolute
            top 40px
            right 0
            border-radius 5px
            text-align center
            span{
                color #fff
                font-size 12px
                display block
                line-height 25px
            }
            &:before{
                content ""
                display block
                width 0
                height 0
                border-width 6px
                border-style solid 
                border-color transparent transparent rgba(0,0,0,0.5)
                position absolute
                top -12px
                right 10px
            }
        }
    }
    .userinfo-top-bg{
        width 100%
        height 150px
        background-color: #3d81cb
    }
    .user-avatar{
        text-align center
        height 70px
        line-height 70px
        margin-top -35px
        i{
            font-size 60px
            color #555
            border 1px solid #eee
            background #eee
            border-radius 5px
        }
    }
    .user-name{
        text-align center
        font-size 18px
        margin 5px 0 15px
    }
    .user-btn{
        display flex
        align-items center
        justify-content center
        padding 0 15px
        margin-bottom 15px
        button{
            flex 1
            text-align center
            height 35px
            border-radius 5px
            font-size 14px
            &.trans{
                color #fff
                background #3d81cb
            }
            &.add{
                color #3d81cb
                border 1px solid #3d81cb
                margin-left 10px
                &.applyed{
                    background #eee
                    border 0
                    color #333
                }
            }
        }
    }
    .user-item{
        padding 10px 15px
        display flex
        font-size 16px
        >span{
            width 100px
            flex-shrink 0
            color #999
        }
        .user-imglist{
            width calc(100% - 100px)
            display flex
            .user-add{
                width 40%
                height 80px
                background #fff
                display flex
                align-items center
                justify-content center
                font-size 20px
                color #999
                margin-right 10px
                .imgbg{
                    display block
                    width 100%
                    height 100%
                    display flex
                    align-items center
                    justify-content center
                    // background url(../../assets/image/addimg.png) no-repeat center
                    background-size 30px
                    overflow hidden
                    border 1px solid #eee
                    img{
                        width 100%
                        height 100%
                        display block
                    }
                    i{
                        font-size 12px
                    }
                }
            }
        }
    }
}
</style>
